
//属性 
// banner 可视区域
// imgBox  图片区域
// pointBox  按钮区域  
// index  当前第几张  
// t      第几个定时器  

// 属性中 调用 方法 

// 方法
//  设置焦点 

// 切换图片 

// 自动轮播 

// 移入移除 

// 点击事件 
class Banner{
    constructor(selector,options={}){
        // 根据传过来的选择器找到banner区域 
        this.banner = document.querySelector(selector);
        // 每个banner承载图片的盒子
        this.imgBox = this.banner.querySelector('.imgBox');
        // 每个banner承载按钮的盒子
        this.pointBox = this.banner.querySelector('.pointBox');
        this.index = 0; // 当前第几张
        this.t = 0; // 第几个定时器
        this.options = options;
        // 如果设置了 transition 动画时间 
        // 每个li 都要执行这个时间  
        for(let i=0;i<this.imgBox.children.length;i++){
            this.imgBox.children[i].style.transition = `all ${(this.options.speed || 300)/ 1000 }s linear`
        }
        this.setPoint();
        this.autoplay();
        this.overOut();
        this.bindEvent()

    }

    setPoint(){
        const pointNum = this.imgBox.children.length; // 几张图片几个焦点

        for(let i=0;i<pointNum;i++){
            const li = document.createElement('li');
            // 方便找到事件目标 
            li.classList.add('item');
            // 默认让第一个按钮被选中
            if(i==0){
                li.classList.add('active');
            }
            li.dataset.point = i;
            this.pointBox.appendChild(li);
        }
    }

    changePage(type){
        // 为了保证同一时刻只能有一个高亮 一个图片显示 
        // 可以让当前的图片隐藏 当前的按钮取消高亮 

        this.imgBox.children[this.index].classList.remove('active');
        this.pointBox.children[this.index].classList.remove('active');
        if(type === true){
            this.index--;
        }

        else if(type === false){
            this.index++;
        }
        else{
            this.index = type;
        }

        // 判断是否越界 
        if(this.index<0){
            this.index = this.imgBox.children.length-1;
        }

        if(this.index>=this.imgBox.children.length){
            this.index = 0;
        }

        this.imgBox.children[this.index].classList.add('active');
        this.pointBox.children[this.index].classList.add('active');

    }

    autoplay(){
        this.t = setInterval(()=>{
            this.changePage(false);
        },this.options.duration || 1000);
    }

    // 移入移出  
    overOut(){
        this.banner.addEventListener('mouseover',()=>clearInterval(this.t));
        this.banner.addEventListener('mouseout',()=>this.autoplay());

    }

    //点击事件
 
    bindEvent(){
        this.banner.addEventListener('click',e=>{
            if(e.target.className === 'prev') this.changePage(true);
            if(e.target.className === 'next') this.changePage(false);
            if(e.target.className === 'item') this.changePage(e.target.dataset.point - 0) ;
        })
    }

}